<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Generate Colors</title>
    <style>
        .page {
            padding: 15px;
        }

        /* HIDE BLOCK WHEN FUNCTIONALITY IS SUPPORTED */
        @supports (--a: 0) {
            .is-not-supported {
                display: none;
            }
        }

        /* COMMON */
        .color {
            width: 50px;
            height: 50px;
        }

        /* SLIDERS */
        .sliders {
            display: -ms-flexbox;
            display: flex;
        }

        .sliders > * {
            margin-right: 20px;
        }

        /* COLOR-BLOCK */
        .color-block {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            margin-bottom: 5px;
        }

        .color-block > pre {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            margin: 0 10px;
            padding: 10px 0;
            display: block;
            padding: 9.5px;
            font-size: 13px;
            line-height: 1.42857143;
            color: #333;
            word-break: break-all;
            word-wrap: break-word;
            background-color: #f5f5f5;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .color-block > .color {
            -ms-flex: 0 0 50px;
            flex: 0 0 50px;
        }

        /* COLOR, FILTERS */
        .main-color {
            background-color: rgba(var(--r), var(--g), var(--b), 1);
        }

        .grayscale {
            background-color: rgba(
                    calc(0.2126 * var(--r)),
                    calc(0.7152 * var(--g)),
                    calc(0.0722 * var(--b)),
                    1
            );
        }

        .invert {
            background-color: rgba(
                    calc(255 - var(--r)),
                    calc(255 - var(--g)),
                    calc(255 - var(--b)),
                    1
            );
        }

        .sepia {
            background-color: rgba(
                    calc(var(--r) * 0.393 + var(--g) * 0.769 + var(--b) * 0.189),
                    calc(var(--r) * 0.349 + var(--g) * 0.686 + var(--b) * 0.168),
                    calc(var(--r) * 0.272 + var(--g) * 0.534 + var(--b) * 0.131),
                    1
            );
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="is-not-supported alert alert-danger" role="alert">
            <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
            <span class="sr-only">Error:</span>
            CSS custom properties are not supported in the current browser
        </div>
    
        <h2>
            Color components:
        </h2>
        <div class="sliders">
            <label>
            <span>
                Red
                <code>var(--r);</code>
            </span>
                <input type="range" min="0" max="255" name="r" value="207">
            </label>
            <label>
            <span>
                Green
                <code>var(--g);</code>
            </span>
                <input type="range" min="0" max="255" name="g" value="50">
            </label>
            <label>
            <span>
                Blue
                <code>var(--b);</code>
            </span>
                <input type="range" min="0" max="255" name="b" value="50">
            </label>
        </div>
    
        <h2>
            Color:
        </h2>
        <div class="color-block">
            <pre><code>rgba(var(--r), var(--g), var(--b), 1);</code></pre>
            <div class="color main-color"></div>
        </div>
    
        <h2>
            Filtered colors:
        </h2>
        <div class="filters">
            <div class="filter color-block">
                <strong class="text">Grayscale</strong>
                <pre><code>rgba( calc(0.2126 * var(--r)), calc(0.7152 * var(--g)), calc(0.0722 * var(--b)), 1 );</code></pre>
                <div class="color grayscale"></div>
            </div>
            <div class="filter color-block">
                <strong class="text">Invert</strong>
                <pre><code>rgba( calc(255 - var(--r)), calc(255 - var(--g)), calc(255 - var(--b)), 1 );</code></pre>
                <div class="color invert"></div>
            </div>
            <div class="filter color-block">
                <strong class="text">Sepia</strong>
                <pre><code>rgba( calc(var(--r) * 0.393 + var(--g) * 0.769 + var(--b) * 0.189), calc(var(--r) * 0.349 + var(--g) * 0.686 + var(--b) * 0.168), calc(var(--r) * 0.272 + var(--g) * 0.534 + var(--b) * 0.131), 1 );</code></pre>
                <div class="color sepia"></div>
            </div>
        </div>
    </div>
    <!-- js -->
    <script>
        function setProp(prop, value) {
            document.documentElement.style.setProperty('--' + prop, Number(value));
        }

        var inputs = document.querySelectorAll('input[type="range"]');
        var inputsArr = Array.prototype.slice.call(inputs);

        inputsArr.forEach(function (input) {
            input.addEventListener('input', function (e) {
                setProp(e.target.name, e.target.value);
            });

            setProp(input.name, input.value);// init values
        });
    </script>
</body>
</html>